<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>


<!-- <script>
  // 选项式写法
    export default { 
      mounted(){
        console.log(this.$router);
        console.log(this.$route);
      }

    }
</script> -->

<script setup> 
  import { getCurrentInstance,onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router'

  // 方法1: 通过全局找 根实例全局存储了$router,$route =>  1. 选项式语法可以直接用this.xxx  2. template 模板中可以直接用
  // let {$router,$route} = getCurrentInstance().appContext.config.globalProperties;
  // console.log(config);

  // 方法2: 官方提供  => 组合式语法中获取路由实例和当前路由信息
  let $router = useRouter();
  let $route = useRoute();

  onMounted(()=>{
    console.log($router);
    console.log($route);
  })
</script>

<style>
    
</style>
